import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialApp是根组件
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row with expended'),
        ),
        body: HomeContent(),
      ),
      // theme: ThemeData(primaryColor: Colors.blue),
    );
  }
}

// Expanded 类似Web中的Flex可以用在Row和column布局中
//自定义内容组件
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
            flex: 1,
            child: IconContainer(
              Icons.search,
              clolor: Colors.red,
            )),
        Expanded(
            flex: 2,
            child: IconContainer(
              Icons.home,
              clolor: Colors.orange,
            )),
        Expanded(
            flex: 1,
            child: IconContainer(
              Icons.access_alarm,
              clolor: Colors.blue,
            ))
      ],
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
    );
  }
}

//自定义按钮组件
class IconContainer extends StatelessWidget {
  double size;
  IconData iconData;
  Color clolor;

  IconContainer(this.iconData, {this.clolor = Colors.white, this.size = 32});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.clolor,
      child: Center(
        child: Icon(
          this.iconData,
          size: this.size,
          color: Colors.black,
        ),
      ),
    );
  }
}
